<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示/隐藏</title>
</head>
<body>
<div id="messageBox">
    hello
</div>
<div>
    <button id="btnShow">显示</button>
    <button id="btnHide">隐藏</button>
    <button id="btnToggle">切换</button>
</div>
</body>
<script>


var btnHide = document.getElementById('btnHide'); // 1. 选择器---找到dom，获取控制权
var btnShow = document.getElementById('btnShow');
var btnToggle=document.getElementById('btnToggle');

btnHide.style.width='80px';//2.改变dom节点

btnHide.onclick=function () { // 事件绑定
    var messageBox = document.getElementById('messageBox');
    messageBox.style.display = 'none'; // 修改样式
}

btnShow.onclick=function () {
    var messageBox = document.getElementById('messageBox');
    messageBox.style.display = 'block';
}

/*
* 1. 如何实现正常切换
* 2. 如何在不改变占据的空间的前提下，只隐藏内容
* */
btnToggle.onclick=function () {
    var messageBox = document.getElementById('messageBox');

    if(messageBox.style.display == 'block'){
        messageBox.style.display = 'none'
    }else {
        messageBox.style.display = 'block'
    }


}


</script>
</html>